<template>
  <view class="mt-pay-popup">
    <uv-popup ref="popupRef" :round="round" :mode="mode" z-index="800" :close-on-click-overlay="closeOnClickOverlay" @change="handleChange">
      <view class="mt-popup-body">
        <view class="mt-popup-title">
          <view class="close" @click="close">
            <image class="icon" src="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-close.svg"></image>
          </view>
          <view class="content">
            <slot name="title">
              <view class="default-title ellipsis">选择支付方式</view>
            </slot>
          </view>
        </view>
        <view class="mt-popup-content">
          <view class="text-48rpx text-#1A1A1A text-center font-bold">￥{{ amountTransfer(price) }}</view>
          <uv-radio-group v-model="payType" placement="column" icon-placement="right">
            <uv-radio v-for="item in payArr" :key="item.paymentChannel" :name="item.paymentChannel">
              <view class="flex items-center py-24rpx">
                <image
                  v-if="item.paymentChannel === 1"
                  class="w-48rpx h-48rpx mr-16rpx"
                  src="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-pay-weixin.svg"
                ></image>
                <image
                  v-if="item.paymentChannel === 2"
                  class="w-48rpx h-48rpx mr-16rpx"
                  src="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-pay-alipay.svg"
                ></image>
                <image
                  v-if="item.paymentChannel === 3"
                  class="w-48rpx h-48rpx mr-16rpx"
                  src="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-pay-offline.svg"
                ></image>
                <image
                  v-if="item.paymentChannel === 100"
                  class="w-48rpx h-48rpx mr-16rpx"
                  src="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-pay-apple.svg"
                ></image>
                <view class="flex-1 min-w-0 text-#1C213E text-28rpx">{{ item.paymentChannelName }}</view>
              </view>
            </uv-radio>
          </uv-radio-group>
        </view>
        <view class="mt-popup-footer">
          <mt-button v-if="payType === 3" class="w-270rpx" :shake="false" style="margin-right: 20rpx" type="info" @click="copyCorporate"
            >复制账号信息</mt-button
          >
          <mt-button class="flex-1" @click="handleConfirm">立即支付</mt-button>
        </view>
      </view>
    </uv-popup>
  </view>
</template>

<script setup>
import userCommon from '@/store/common';
import { amountTransfer, copyCorporate } from '@/utils/tools';
import { settingsgetPaySettings } from '@/api/common';

const commonStore = userCommon();

const props = defineProps({
  mode: {
    type: String,
    default: 'bottom'
  },
  closeOnClickOverlay: {
    type: Boolean,
    default: true
  },
  round: {
    type: String,
    default: '32rpx'
  }
});

const emits = defineEmits(['confirm']);

const payType = ref(2);
const price = ref();
const popupRef = ref();

function open(params = {}) {
  price.value = params.amount;
  popupRef.value.open();
}

function close() {
  popupRef.value.close();
}

const payArr = ref([]);
function getData() {
  settingsgetPaySettings().then((res) => {
    let arr = res?.data || [];
    if (commonStore.systemInfo.osName !== 'ios') {
      arr = arr.filter((s) => s.paymentChannel !== 100);
    }
    payArr.value = arr;
  });
}
getData();

function handleChange(e) {
  commonStore.setPageScroll(!e.show);
}

function handleConfirm() {
  emits('confirm', payType.value);
}

defineExpose({
  open,
  close
});
</script>

<style lang="scss" scoped>
.mt-pay-popup {
  .mt-popup-body {
    min-height: 200rpx;
    background-color: #ffffff;
    .mt-popup-title {
      position: relative;
      display: flex;
      align-items: center;
      height: 96rpx;
      .close {
        position: absolute;
        left: 0;
        top: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 96rpx;
        height: 100%;
        box-sizing: border-box;
        .icon {
          width: 40rpx;
          height: 40rpx;
        }
      }
      .content {
        flex: 1;
        min-width: 0;
        padding-left: 110rpx;
        padding-right: 110rpx;
        box-sizing: border-box;
        .default-title {
          font-size: 32rpx;
          text-align: center;
          font-weight: bold;
        }
      }
      .right {
        position: absolute;
        right: 0;
        top: 0;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        width: 110rpx;
        height: 100%;
        padding-right: 32rpx;
        font-size: 32rpx;
        color: $mt-color-primary;
        box-sizing: border-box;
      }
    }
    .mt-popup-content {
      padding: 0 32rpx 24rpx;
    }
    .mt-popup-footer {
      display: flex;
      align-items: flex-start;
      height: 120rpx;
      padding: 24rpx 32rpx 0;
      box-shadow: 0 -6rpx 8rpx 0 rgba(0, 0, 0, 0.03);
      box-sizing: border-box;
    }
  }
}
</style>
